/*
 * @Author: Salaing
 * @Date: 2024-07-16 19:25:19
 * @LastEditors: Salaing
 * @LastEditTime: 2024-09-03 23:52:15
 * @Description: file content
 */
import React, { useState } from 'react';
import { Button } from 'antd';
import classNames from 'classnames';
import { useSelector, useDispatch } from 'umi';
import iconMap from 'components/IconMap';
import Tree from './component/Tree';
import Dialog from 'components/Dialog';
import FormComponent from './component/FormComponent';
const department = () => {
  const { collapse } = useSelector((state) => state.common);
  const [modalTitle, setModalTitle] = useState('创建部门');
  const [modalType, setmodalType] = useState('update');
  const { showModalDialog } = useSelector((state) => state.department);
  const dispatch = useDispatch();
  // 新增部门弹窗
  const openDialog = () => {
    dispatch({
      type: 'department/saveDepartmentDetail',
      payload: { departmentDetail: null },
    });
    setDialogStatus(true);
    setModalTitle('创建部门');
    setmodalType('add');
  };
  // 点击树状图获取部门详情
  const getDepartmentDetail = (_id, name) => {
    console.log(_id, name);
    setModalTitle(name);
    setmodalType('update');
    dispatch({
      type: 'department/_getDepartmentDetail',
      payload: { _id },
    });
  };
  // 管理弹出状态
  const setDialogStatus = (status) => {
    dispatch({
      type: 'department/saveShowModalDialog',
      payload: { showModalDialog: status },
    });
  };

  // 指定弹窗头部内容生成
  const modaTitleComponent = (
    <div className="department-model-title">
      <span className="ft-b">{modalTitle}</span>
      {modalType === 'update' && (
        <span className="delete-icon">{iconMap.del}</span>
      )}
    </div>
  );

  return (
    <div className="department-container">
      {/* 头部内容 */}
      <Button
        className={classNames('create-department-btn', {
          small: collapse,
        })}
        size="small"
        shape="round"
        icon={iconMap.add}
        onClick={openDialog}
      >
        创建
      </Button>
      <Tree getDepartmentDetail={getDepartmentDetail} />
      <Dialog
        title={modaTitleComponent}
        dialogStatus={showModalDialog}
        setDialogStatus={setDialogStatus}
        width={800}
        render={() => (
          <FormComponent
            setDialogStatus={setDialogStatus}
            modalType={modalType}
          />
        )}
      />
    </div>
  );
};

export default department;
